<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>响应式布局</title>
<!-- 动画 -->
 <link rel="stylesheet" href="./assets/css/animate.min.css"/>

<!-- bootstrap -->
<link rel="stylesheet" href="./assets/css/bootstrap.min.css"/> 
<!-- 重置样式 -->
<link rel="stylesheet" href="./assets/css/reset.css"/>
<!-- 本界面样式 -->
<link rel="stylesheet" href="./assets/css/index.css"/>

</head>
<body>
   <nav class="header navbar navbar-inverse">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="logo navbar-brand wow bounceIn" href="#" data-wow-duration="5s">Spirit8</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

      <ul class="nav navbar-nav navbar-right">
        <li class="wow bounceInDown" data-wow-delay="150ms"><a href="#home">HOME</a></li>
        <li class="wow bounceInDown" data-wow-delay="200ms"><a href="#about">ABOUT</a></li>
        <li class="wow bounceInDown" data-wow-delay="250ms"><a href="#service">SERVICES</a></li>
        <li class="wow bounceInDown" data-wow-delay="300ms"><a href="#portfolio">PORTFOLIO</a></li>
        <li class="wow bounceInDown" data-wow-delay="350ms"><a href="#TESTIMONIALS">TESTIMONIALS</a></li>
        <li class="wow bounceInDown" data-wow-delay="400ms"><a href="#CONTACT">CONTACT</a></li>


      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
   <div class="banner"ID="home">
      <div class="title wow bounceInLeft" data-wow-delay="100ms">wELCOME on <span>spirit8</span></div>
      <div class="content wow bounceIn"data-wow-delay="200ms">We are a digital agency with <span>years of experience</span> and with <span>extraordinary people</span></div>
      <a class="circle wow bounceIn"data-wow-delay="500ms" href="javascript:void(0)">↓</a> 
   </div>
   <div class="ABOUT" ID="about">
       <div class="container">
         <div class="left wow bounceIn"> <img src="./assets/image/com.png"></div>
         <div class="right">
           <div class="title">
              <div class="top wow bounceIn" data-wow-delay="100ms">About us</div>
              <div class="bottom wow bounceIn" data-wow-delay="200ms"><span>some</span> words <span>about us</span> </div>
           </div>
           <div class="content wow bounceIn " data-wow-delay="300ms">We love building and rebuilding brands through our  specific skills. Using colour, fonts, and illustration, 
            we brand companies in a way they will never forget.
           </div>

           <ul class="list">
            <li class="wow bounceIn" data-wow-delay="400ms">
              <span class="glyphicon glyphicon-record" aria-hidden="true"></span>
              <span> Mission -</span> 
              We deliver uniqueness and quality
            </li>
            <li class="wow bounceIn" data-wow-delay="500ms">
              <span class="glyphicon glyphicon-record" aria-hidden="true"></span>
              <span> Skills -</span> 
              Delivering fast and excellent results
            </li>
            <li class="wow bounceIn" data-wow-delay="600ms">
              <span class="glyphicon glyphicon-record" aria-hidden="true"></span>
              <span>Clients -</span> 
               Satisfied clients thanks to our experience
            </li>
           </ul>
           <div class="more circle wow bounceIn"data-wow-delay="1100ms">
             <span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span>
             <span>Browse our work</span>
           </div>
         </div>
         
       </div>
   </div>
   <div class="team" >
      <div class="container">
         <div class="title"><span>meet</span> our team </div>
         <div class="list">
            <div class="item">
              <div class="avatar"> 
                <img src="./assets/image/cover.png"> 
              </div> 
              <div class="box">
                 <div class="name">Jason Statham</div> 
                 <div class="job">Knife designer</div>
                 <div class="content">Do not seek to change what has come before. Seek to create that which has not.</div>
              </div>
            </div>
            <div class="item">
              <div class="avatar"> 
                <img src="./assets/image/cover.png"> 
              </div> 
              <div class="box">
                 <div class="name">Van Damme</div> 
                 <div class="job">No English</div>
                 <div class="content">Do not seek to change what has come before. Seek to create that which has not.</div>
              </div>
            </div>           
            <div class="item">
              <div class="avatar"> 
                <img src="./assets/image/cover.png"> 
              </div> 
              <div class="box">
                 <div class="name">Sylvester Stallone</div> 
                 <div class="job">Cigar Lover</div>
                 <div class="content">Do not seek to change what has come before. Seek to create that which has not.</div>
              </div>
            </div>   
            <div class="item">
              <div class="avatar"> 
                <img src="./assets/image/cover.png"> 
              </div> 
              <div class="box">
                 <div class="name">Jet Li</div> 
                 <div class="job">I need more money</div>
                 <div class="content">Do not seek to change what has come before. Seek to create that which has not.</div>
              </div>
            </div>   

         </div>
         <div class="more">
           <span></span>
           <span></span>
           <span></span>
         </div>
      </div>
   </div>
    <div class="service"ID="service">
      <div class="container">
         <div class="title"> take a look at<span> our services</span> </div>
         <div class="content">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
          </div>        
         <div class="list">
           <div class="item">
             <div class="pic"> 
               <img src="./assets/image/01.png"> 
              </div> 
             <div class="box">
                 <div class="device">Web design</div> 
                 <div class="content">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
              </div>
            </div>
           <div class="item">
             <div class="pic"> 
               <img src="./assets/image/02.png"> 
              </div> 
             <div class="box">
                 <div class="device">Mobile apps</div> 
                 <div class="content">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
              </div>
            </div>
           <div class="item">
             <div class="pic"> 
               <img src="./assets/image/03.png"> 
              </div> 
             <div class="box">
               <div class="device">PHOTOGRAPHY</div> 
               <div class="content">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
              </div>
            </div>  
           <div class="item">
             <div class="pic"> 
               <img src="./assets/image/04.png"> 
              </div> 
              <div class="box">
                 <div class="device">marketing</div> 
                 <div class="content">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
              </div>
            </div>  
          </div>
      </div>
   </div>
   <div class="portfolio" ID="portfolio">
    <div class="container">
         <div class="title"><span>SOME OF </span> OUR CLIENTS</div>
         <div class="list">
           <div class="item">
             <img src="./assets/image/Layer 69.png"></div>
             <div class="item"><img src="./assets/image/Layer 65.png"></div>
             <div class="item"><img src="./assets/image/Layer 68.png"></div>
             <div class="item"><img src="./assets/image/Layer 67.png"></div>
            <div class="item"><img src="./assets/image/Layer 64.png"></div>
            </div>
          
           
         <div class="more">
           <span></span>
           <span></span>
           <span></span>
         </div>
      </div>
   </div>
   <div class="work">
    <div class="container">
       <div class="title"><span>take a look at  </span> our work</div>
       <div class="desc">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
       <div class="box">
          <div class="top">
            <div class="left">Filter by type</div>
            <div class="right">
            <a href="javascript:void(0)">All</a>
            <a href="javascript:void(0)">Web design</a>
            <a href="javascript:void(0)">Mobile design</a>
            <a href="javascript:void(0)">Photograpy</a>
            </div>
            <select class="menu">
              <option value="">ALL</option>
              <option value="">Web design</option>
              <option value="">Mobile design</option>
              <option value="">Photograpy</option>
            </select>
          </div>
          <div class="list">
            <div class="item">
              <img src="./assets/image/work-img.png"/>
              <div class="mask">
                <div class="name">Trend and fashion</div>
                <div class="desc">Website design</div>
                <span class="plus">+</span>
              </div>
            </div>
            <div class="item">
              <img src="./assets/image/work-img.png"/>
              <div class="mask">
                <div class="name">Trend and fashion</div>
                <div class="desc">Website design</div>
                <span class="plus">+</span>
              </div>
            </div>
            <div class="item">
              <img src="./assets/image/work-img.png"/>
              <div class="mask">
                <div class="name">Trend and fashion</div>
                <div class="desc">Website design</div>
                <span class="plus">+</span>
              </div>
            </div>
            <div class="item">
              <img src="./assets/image/work-img.png"/>
              <div class="mask">
                <div class="name">Trend and fashion</div>
                <div class="desc">Website design</div>
                <span class="plus">+</span>
              </div>
            </div>
            <div class="item">
              <img src="./assets/image/work-img.png"/>
              <div class="mask">
                <div class="name">Trend and fashion</div>
                <div class="desc">Website design</div>
                <span class="plus">+</span>
              </div>
            </div>
            <div class="item">
              <img src="./assets/image/work-img.png"/>
              <div class="mask">
                <div class="name">Trend and fashion</div>
                <div class="desc">Website design</div>
                <span class="plus">+</span>
              </div>
            </div>
            <div class="item">
              <img src="./assets/image/work-img.png"/>
              <div class="mask">
                <div class="name">Trend and fashion</div>
                <div class="desc">Website design</div>
                <span class="plus">+</span>
              </div>
            </div>
            <div class="item">
              <img src="./assets/image/work-img.png"/>
              <div class="mask">
                <div class="name">Trend and fashion</div>
                <div class="desc">Website design</div>
                <span class="plus">+</span>
              </div>
            </div>
            <div class="item">
              <img src="./assets/image/work-img.png"/>
              <div class="mask">
                <div class="name">Trend and fashion</div>
                <div class="desc">Website design</div>
                <span class="plus">+</span>
              </div>
            </div>
            <div class="item">
              <img src="./assets/image/work-img.png"/>
              <div class="mask">
                <div class="name">Trend and fashion</div>
                <div class="desc">Website design</div>
                <span class="plus">+</span>
              </div>
            </div>
            <div class="item">
              <img src="./assets/image/work-img.png"/>
              <div class="mask">
                <div class="name">Trend and fashion</div>
                <div class="desc">Website design</div>
                <span class="plus">+</span>
              </div>
            </div>
            <div class="item">
              <img src="./assets/image/work-img.png"/>
              <div class="mask">
                <div class="name">Trend and fashion</div>
                <div class="desc">Website design</div>
                <span class="plus">+</span>
              </div>
            </div>
          </div>
       </div>
      </div>
   </div>
   <div class="testimonial" ID="TESTIMONIALS">
    <div class="container">
     <div class="title"><span>our clients'</span> testimonials</div>
     <div class="content">This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
     <div class="end">Dean Martin, CEO Acme Inc.</div>
     <div class="more">
         <span></span>
           <span></span>
           <span></span>
      </div>
     </div>
    
   </div>
   <div class="contact" ID="CONTACT">
    <div class="container">
 <div class="top">feel free to <span>contact us</span></div>
     <div class="content">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. </div>
     <div class="box">
       <div class="info">
         <div class="item">
          <div class="title">Name<sup>*</sup></div>
          <input type="text" placeholder="请输入昵称"/>
         </div>
         <div class="item">
          <div class="title">Email address<sup>*</sup></div>
          <input type="text" placeholder="请输入邮箱"/>
         </div>
       </div>
      <div class="message"> 
         <div class="title">Message<sup>*</sup></div>
        <textarea placeholder="请输入留言内容" rows="8"></textarea>
      </div>
      <div class="button">
         <button type="subbit">send</button>
      </div>
     </div>
     
   </div>
</div>
   <footer>
      <div class="container">
         <div class="copyright">ALL RIGHTS RESERVED. COPYRIGHT @ 2014 SPIRIT8</div>
         <div class="link">
             <div class="item"><img src="./assets/image/footer1.png" /></div>
             <div class="item"><img src="./assets/image/footer2.png" /></div>
             <div class="item"><img src="./assets/image/footer3.png" /></div>
             <div class="item"><img src="./assets/image/footer4.png" /></div>
             <div class="item"><img src="./assets/image/footer5.png" /></div>
         </div>
        </div> 
   </footer>

    
</body>
</html>
<!-- jquery-->
<script src="./assets/js/jquery.min.js"></script>
<!-- boot脚本 -->
<script src="./assets/js/bootstrap.min.js"></script>
<!-- wow脚本 -->
<script src="./assets/js/wow.min.js"></script>

<script>
  new WOW().init();
</script>